<template>
  <view class="detailPopup-content-swiper">
    <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="currentImageList"
      :current="current" :mode="mode"
    	:dots-styles="dotsStyles" field="content">
    	<swiper class="swiper-box" circular  @change="changeSwiper" :current="swiperDotIndex">
    		<swiper-item v-for="(item, index) in currentImageList" :key="index">
    			<view class="swiper-item" :class="'swiper-item' + index">
            <image :src="baseUrl + item" mode=""></image>
    				<!-- <text style="color: #fff; font-size: 32px;">{{item}}</text> -->
    			</view>
    		</swiper-item>
    	</swiper>
    </uni-swiper-dot>
  </view>
</template>

<script>
  import {baseUrl} from '@/config.js'
  export default {
    props:{
      currentImageList:{
        type:Array,
        default:()=>[]
      }
    },
    data(){
      return{
        current: 0,
        mode: 'round',
        baseUrl:baseUrl,
        dotsStyles: {},
        swiperDotIndex: 0,
      }
    },
    methods:{
      clickItem(e) {
      	this.swiperDotIndex = e
      },
      changeSwiper(e){
        this.current = e.detail.current
      },
    },
    created() {
      console.log("currentImageList",this.currentImageList)
    },
  }
</script>

<style>
</style>